import { Layout, Menu, MenuProps } from 'antd'
import React, { useEffect, useState } from 'react'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'

const { Content, Sider } = Layout

const Setting: React.FC = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const menuItems: { label: string; key: string }[] = [
    {
      label: '收集建议',
      key: '/monitor/suggestion'
    },
    {
      label: '需求订单',
      key: '/monitor/demandOrder'
    }
  ]

  const [current, setCurrent] = useState('/monitor/suggestion')

  const onClick: MenuProps['onClick'] = (e) => {
    setCurrent(e.key)
    navigate(e.key)
  }

  useEffect(() => {
    menuItems?.forEach((first: any) => {
      if (first.key === location.pathname) {
        setCurrent(first.key)
      }
    })
    if (location.pathname === '/monitor') {
      navigate(menuItems[0].key)
    }
  }, [location])

  return (
    <Layout>
      <Sider breakpoint="lg" collapsedWidth="0" theme="light" className="overflow-auto">
        <Menu selectedKeys={[current]} items={menuItems} onClick={onClick} />
      </Sider>
      <Layout className="overflow-auto">
        <Content>
          <div
            style={{
              padding: 16,
              height: '100%'
            }}>
            <Outlet />
          </div>
        </Content>
      </Layout>
    </Layout>
  )
}

export default Setting
